<template>
    <div class="flower-manager">
      <!-- 添加鲜花表单 -->
      <div class="p-card p-mb-4">
        <h2 class="form-title">添加新鲜花</h2>
        <div class="p-fluid">
          <div class="p-field">
            <label>花名</label>
            <InputText v-model="newFlower.name" class="custom-input" />
          </div>
          <div class="p-field">
            <label>价格</label>
            <InputNumber v-model="newFlower.price" mode="currency" currency="CNY" class="custom-input" />
          </div>
          <div class="p-field">
            <label>库存</label>
            <InputNumber v-model="newFlower.stock" class="custom-input" />
          </div>
          <Button label="添加" @click="addFlower" class="p-button-success add-button" />
        </div>
      </div>
  
      <!-- 鲜花列表 -->
      <DataTable :value="flowers" class="p-datatable-striped custom-table">
        <Column field="name" header="花名"></Column>
        <Column field="price" header="价格">
          <template #body="{ data }">
            {{ formatCurrency(data.price) }}
          </template>
        </Column>
        <Column field="stock" header="库存"></Column>
        <Column header="操作">
          <template #body="{ data }">
            <Button icon="pi pi-trash" class="p-button-danger p-mr-2 action-button" @click="deleteFlower(data.id)" />
            <Button icon="pi pi-pencil" class="p-button-warning action-button" @click="editFlower(data)" />
          </template>
        </Column>
      </DataTable>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import Button from 'primevue/button'
  import InputText from 'primevue/inputtext'
  import InputNumber from 'primevue/inputnumber'
  import DataTable from 'primevue/datatable'
  import Column from 'primevue/column'
  
  interface Flower {
    id: number
    name: string
    price: number
    stock: number
  }
  
  const initialFlowers: Flower[] = [
    { id: 1, name: '红玫瑰', price: 12.99, stock: 50 },
    { id: 2, name: '白百合', price: 9.99, stock: 30 }
  ]
  
  const flowers = ref<Flower[]>([...initialFlowers])
  const newFlower = ref<Omit<Flower, 'id'>>({
    name: '',
    price: 0,
    stock: 0
  })
  
  const addFlower = () => {
    if (!newFlower.value.name) return
    flowers.value.push({
      id: Date.now(),
      ...newFlower.value
    })
    newFlower.value = { name: '', price: 0, stock: 0 }
  }
  
  const deleteFlower = (id: number) => {
    flowers.value = flowers.value.filter(flower => flower.id !== id)
  }
  
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY'
    }).format(value)
  }
  </script>
  
  <style scoped>
  .flower-manager {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .p-card {
    padding: 2rem;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .form-title {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
  }
  
  .p-field {
    margin-bottom: 1.5rem;
  }
  
  .p-field label {
    display: block;
    margin-bottom: 0.5rem;
    color: #4a5568;
    font-weight: 500;
  }
  
  .custom-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.3s ease;
  }
  
  .custom-input:hover,
  .custom-input:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
  }
  
  .add-button {
    width: 100%;
    padding: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .custom-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .action-button {
    transition: all 0.3s ease;
  }
  
  .action-button:hover {
    transform: scale(1.05);
  }
  
  :deep(.p-datatable .p-datatable-thead > tr > th) {
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    padding: 1rem;
  }
  
  :deep(.p-datatable .p-datatable-tbody > tr > td) {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
  }
  
  :deep(.p-datatable .p-datatable-tbody > tr:hover) {
    background: #f7fafc;
  }
  </style>